// 全局自定义指令
// 需求：图片加载出错就使用默认图片,默认图片可以通过自定义指令更换
// js变量地址，webpack不解析?用require解决
// moment  1:下载  2：导入  3:  moment(时间).format('YYYY-MM-DD')
import moment from 'moment'
import head from '@/assets/common/head.jpg'
// export default {
//   install(Vue, options) {
//     Vue.directive('imgError', {
//       inserted(dom, obj) {
//         // 图片src有值使用图片的src，无值使用指令的value，再无值使用默认head
//         dom.src = dom.src || obj.value || head
//         // 图片加载出错时的处理
//         dom.onerror = () => {
//           dom.src = obj.value || head
//         }
//       },
//       // 考虑图片的更新
//       componentUpdated() {
//         dom.src = dom.src || obj.value || head
//       }
//     })
//     console.log('我是install', options)
//   }
// }
import employeesData from '@/api/constant/employees'
import store from '@/store'
function changeFn(dom, obj) {
  const findItem = employeesData[obj.arg].find(
    (item) => +item.id === +obj.value
  )
  const val = findItem ? findItem.value : '-'
  dom.innerText = '指令搞定：' + val
}
let clickOutFn = ''

export default function(Vue, options) {
  // 图片出错处理
  Vue.directive('imgError', {
    inserted(dom, obj) {
      // 图片src有值使用图片的src，无值使用指令的value，再无值使用默认head
      dom.src = dom.src || obj.value || head
      // 图片加载出错时的处理
      dom.onerror = () => {
        dom.src = obj.value || head
      }
    },
    // 考虑图片的更新
    componentUpdated(dom, obj) {
      dom.src = dom.src || obj.value || head
    }
  })

  // employees页面的聘用形式数据转换
  // 指令用法: v-指令名:属性名.修饰符=值
  Vue.directive('formatter', {
    inserted(dom, obj) {
      changeFn(dom, obj)
    },
    componentUpdated(dom, obj) {
      changeFn(dom, obj)
    }
  })
  // 点击dom区域外执行某事件
  Vue.directive('clickOut', {
    inserted(dom, obj) {
      clickOutFn = (e) => {
        // e.target:点击的dom
        // dom:指令的dom
        // 判断dom是否包含e.target
        if (dom.contains(e.target)) {
          console.log('dom内')
        } else {
          obj.value()
          console.log('dom外')
        }
      }
      document.addEventListener('click', clickOutFn)
    },
    unbind() {
      document.removeEventListener('click', clickOutFn)
    }
  })
  // 转换时间
  Vue.directive('formatTime', {
    inserted(dom, obj) {
      dom.innerText = moment(obj.value).format('YYYY-MM-DD')
    },
    componentUpdated(dom, obj) {
      dom.innerText = moment(obj.value).format('YYYY-MM-DD')
    }
  })
  Vue.directive('showBtn', {
    inserted(dom, obj) {
      if (!store.state.user.userInfo.roles.points.includes(obj.value)) {
        dom.style.display = 'none'
      }
    }
  })
}
